<template>
  <div>
    订单编号:{{orderId}}   <br>
    价格：{{total_fee}}   <br>
    支付备注:{{body}}  <br>
    后台二维码返回code_url：{{code_url}}  <br>
    trade_state_desc{{trade_state_desc}}

    {{count}}
    <button @click="wx_unifiedOrder()">微信支付</button>
    <br>
    <canvas id="canvas"></canvas>
  </div>
</template>

<script>
  import QRCode from 'qrcode'
  import { orderQuery  } from '@/api/health'
  import axios from 'axios'
  export default {
    name: 'Index',
    data(){
      return{
        opts : {
          errorCorrectionLevel: "H",//容错级别
          type: "image/png",//生成的二维码类型
          quality: 0.3,//二维码质量
          margin: 12,//二维码留白边距
          width: 500,//宽
          height: 500,//高
          text: "",//二维码内容
          color: {
            dark: "#333333",//前景色
            light: "#fff"//背景色
          }
        },
        code_url:'',
        orderId:'',
        total_fee:'',
        body:'',
        timer:null,
        trade_state_desc:'',
        count:0
      }
    },
    methods:{
      async wx_unifiedOrder(){
        await axios.post("http://localhost:7000/shop/pay/unifiedOrder/"+this.orderId+"/"+this.total_fee+"/"+this.body).then(res=>{
          if(res.data.success){
            //debugger
            this.code_url = res.data.message;
          }
        })
        await this.createQRcode();
        this.timer = setInterval(()=>{
          orderQuery(this.orderId).then(res=>{
            this.trade_state_desc = res.data.message;
            this.count++;
//debugger
            if(res.data.success){
              clearInterval(this.timer)
              console.log("Success")
            }
            if(this.count>30){
              clearInterval(this.timer)
            }
          })
        },2000);

      },
      createQRcode(){
        var canvas = document.getElementById('canvas');
        //debugger
        QRCode.toCanvas(canvas, this.code_url, this.opts,(error)=> {
          if (error) {
            console.log(error)
          }else{
            console.log('success!');
          }
        });
      }
    },
    mounted(){
      let obj= this.$route.query.obj;
      /*
              let obj= this.$route.query.obj;
              this.orderId = obj.orderId;
              this.total_fee =obj.payment;
              this.body = obj.goodsDesc;*/

      this.orderId = obj.orderId;
      this.total_fee = 1;//测试1分钱
      this.body ='花';


    },
    created(){
    }
  }
</script>

<style scoped></style>
